<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js入口函数和jquery入口函数之间的2个区别</title>
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1GFcBtrH1gK0jSZFwXXc7aXXa-190-121.gif" />
</body>

<script>
    /*
    功能:
        在打开这个页面之后, 原生js和jquery的入口函数都会被执行, 观察输出结果.
    输出:
        jquery的入口函数-获取img标签中远程图片的宽度(使用原生js): 0px
        jquery的入口函数获取img标签中远程图片的宽度(使用jquery): 0
        js入口函数-获取img标签中远程图片的宽度(使用原生js): 190px
        js入口函数-获取img标签中远程图片的宽度(使用jquery): 190
    说明:
        1. (加载模式区别) 可以发现, 同样的方法, 放在js的入口函数中可以获取到远程图片的宽度, 但是jquery的入口函数中获取不到;
            - 这个和js和jquery的加载模式有关:
                1. js的入口函数会等待浏览器以下两件事做完之后再执行：
                    - 页面元素加载完毕;
                    - 远程资源加载完毕, 例如本页面中的img标签加载远程服务器的图片.
                        1. 如果带宽非常慢, 会在f12-console中观察到延迟等待效果.
                2. 而jquery的入口函数会等待浏览器以下事情做完之后执行:
                    - 页面元素加载完毕;
                3. jquery并不会等待远程资源加载完毕, 所以jquery获取img图片的宽度时, 可能正在加载远程资源, 但是此时src是没有内容
                的, 所以输出为0;
        2. (入口函数覆盖执行区别) 多个入口函数时的覆盖问题:(在entryFunction2.html页面中说明, 输出结果请对比本页面的输出):
            - entryFunction2.html页面的结论:
            ```
            功能:
                测试入口函数被覆盖时的执行过程.
            输出:
                jquery的入口函数-获取img标签中远程图片的宽度(使用原生js): 190px
                jquery的入口函数获取img标签中远程图片的宽度(使用jquery): 190
                jquery的入口函数-覆盖测试
                js入口函数-覆盖测试
            说明:
                1. 从输出结果中可以发现:
                    - 原生js的入口函数被覆盖时, 只会执行最后一个入口函数;
                    - jquery的入口函数被覆盖时, 两个入口函数都会被执行;
            ```

    */

    //js入口函数
    window.onload = function () {
        console.log("js入口函数-获取img标签中远程图片的宽度(使用原生js):", getImageWidth());
        console.log("js入口函数-获取img标签中远程图片的宽度(使用jquery):", getImageWidthUseJquery());
    };

    //jquery的入口函数
    $(document).ready(function () {
        console.log("jquery的入口函数-获取img标签中远程图片的宽度(使用原生js):", getImageWidth());
        console.log("jquery的入口函数获取img标签中远程图片的宽度(使用jquery):", getImageWidthUseJquery());
    });

    /**
     * 功能:
     *      使用原生js方式获取页面元素.
     * 生产:
     *      通过浏览器查看.
     */
    function getImageWidth() {
        const img = document.getElementsByTagName("img")[0];
        const imgWidth = window.getComputedStyle(img).width;

        return imgWidth;
    }

    function getImageWidthUseJquery() {
        const img = $("img");
        const imgWidth = img.width();

        return imgWidth;
    }
</script>

</html>